<template>
  <div>
    <div>
      <el-steps :space="200" :active="2" finish-status="success" align-center>
        <el-step title="已完成">1</el-step>
        <el-step title="已完成">2</el-step>
        <el-step title="进行中">3</el-step>
        <el-step title="上传附件">4</el-step>
      </el-steps>
      <div style="color: #4A5064; background-color: #C7C7C7; height: 50px; width: 95%; text-align: center; border-radius: 4px;">
        <div style="font-family:'PingFangSC'; float: left; font-size: 25px; margin-top: 8px; margin-left: 10px">采购计划</div>
        <el-button type="info" style="float: right; margin-top: 5px; margin-right: 10px" @click="addDialogVisible = true">新增</el-button>
      </div>
    </div>

    <el-table
      :data="Planlist"
      border
      style="width: 95%">
      <el-table-column prop="purchaseItem" label="采购商品名称" width="110"></el-table-column>
      <el-table-column prop="expectSglPrice" label="预计采购单价" width="110"></el-table-column>
      <el-table-column prop="purchaseNum" label="采购数量" width="100"></el-table-column>
      <el-table-column prop="purchaseUnit" label="采购单位" width="100"></el-table-column>
      <el-table-column prop="expectPrice" label="采购总价" width="100"></el-table-column>
      <el-table-column prop="purchaseContract" label="采购合同" width="100"></el-table-column>
      <el-table-column prop="utdPurchaseNum" label="已采购数量" width="100"></el-table-column>
      <el-table-column prop="purchaseStatus" label="采购状态"></el-table-column>
      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <!--修改按钮-->
          <el-tooltip class="item" effect="dark" content="修改" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.ticketId)"></el-button>
          </el-tooltip>
          <!--删除按钮-->
          <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removePlanById(scope.row.ticketId)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--添加预算对话框-->
    <el-dialog
      title="添加预算"
      :visible.sync="addDialogVisible"
      width="500px"
      @close="addDialogClosed">
      <el-form :model="addForm" :rules="addFormRules" label-width="80px" ref="addFormRef">
        <el-form-item label="方案编码" prop="planId">
          <el-input class="form-input" v-model="addForm.planId" disabled></el-input>
        </el-form-item>
        <el-form-item label="采购商品名称" prop="purchaseItem">
          <el-input class="form-input" v-model="addForm.purchaseItem"></el-input>
        </el-form-item>
        <el-form-item label="预计采购单价" prop="expectSglPrice">
          <el-input class="form-input" v-model="addForm.expectSglPrice"></el-input>
        </el-form-item>
        <el-form-item label="采购数量" prop="purchaseNum">
          <el-input class="form-input" v-model="addForm.purchaseNum"></el-input>
        </el-form-item>
        <el-form-item label="采购单位" prop="purchaseUnit">
          <el-input class="form-input" v-model="addForm.purchaseUnit"></el-input>
        </el-form-item>
        <el-form-item label="采购总价" prop="expectPrice">
          <el-input class="form-input" v-model="addForm.expectPrice"></el-input>
        </el-form-item>
        <el-form-item label="采购合同" prop="purchaseContract">
          <el-input class="form-input" v-model="addForm.purchaseContract"></el-input>
        </el-form-item>
        <el-form-item label="已采购数量" prop="utdPurchaseNum">
          <el-input class="form-input" v-model="addForm.utdPurchaseNum"></el-input>
        </el-form-item>
        <el-form-item label="采购状态" prop="purchaseStatus">
          <el-input class="form-input" v-model="addForm.purchaseStatus"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPlan">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改预算对话框-->
    <el-dialog
      title="修改预算"
      :visible.sync="editDialogVisible"
      width="500px"
      @close="editDialogClosed">
      <el-form :model="editForm" :rules="addFormRules" label-width="80px" ref="editFormRef">
        <el-form-item label="方案编码" prop="planId">
          <el-input class="form-input" v-model="editForm.planId" disabled></el-input>
        </el-form-item>
        <el-form-item label="采购商品名称" prop="purchaseItem">
          <el-input class="form-input" v-model="editForm.purchaseItem"></el-input>
        </el-form-item>
        <el-form-item label="预计采购单价" prop="expectSglPrice">
          <el-input class="form-input" v-model="editForm.expectSglPrice"></el-input>
        </el-form-item>
        <el-form-item label="采购数量" prop="purchaseNum">
          <el-input class="form-input" v-model="editForm.purchaseNum"></el-input>
        </el-form-item>
        <el-form-item label="采购单位" prop="purchaseUnit">
          <el-input class="form-input" v-model="editForm.purchaseUnit"></el-input>
        </el-form-item>
        <el-form-item label="采购总价" prop="expectPrice">
          <el-input class="form-input" v-model="editForm.expectPrice"></el-input>
        </el-form-item>
        <el-form-item label="采购合同" prop="purchaseContract">
          <el-input class="form-input" v-model="editForm.purchaseContract"></el-input>
        </el-form-item>
        <el-form-item label="已采购数量" prop="utdPurchaseNum">
          <el-input class="form-input" v-model="editForm.utdPurchaseNum"></el-input>
        </el-form-item>
        <el-form-item label="采购状态" prop="purchaseStatus">
          <el-input class="form-input" v-model="editForm.purchaseStatus"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPlan">确 定</el-button>
      </span>
    </el-dialog>
    <p>
      <el-button type="primary" style="width: 100px" @click="toAddAttachment">提交</el-button>
    </p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        Planlist: [],
        // 控制新增票据对话框的显示与隐藏
        addDialogVisible: false,
        // 控制修改票据对话框的显示与隐藏
        editDialogVisible: false,
        // 控制删除票据对话框的显示与隐藏
        deleteDialogVisible: false,
        addForm:{
          ticketId:'',
          planId: this.$root.planId,
          purchaseItem: '1',
          expectSglPrice: '1',
          purchaseNum: '1',
          purchaseUnit: '1',
          expectPrice: '1',
          purchaseContract: '1',
          utdPurchaseNum: '1',
          purchaseStatus: '1',
        },
        addFormRules:{
          purchaseItem: [
            {
              required: true,
              message: '请输入采购商品名称',
              trigger: 'blur'
            }
          ],
          expectSglPrice: [
            {
              required: true,
              message: '请输入预计采购单价',
              trigger: 'blur'
            }
          ],
          purchaseNum: [
            {
              required: true,
              message: '请输入采购数量',
              trigger: 'blur'
            }
          ],
          purchaseUnit: [
            {
              required: true,
              message: '请输入采购单位',
              trigger: 'blur'
            }
          ],
          expectPrice: [
            {
              required: true,
              message: '请输入采购总价',
              trigger: 'blur'
            }
          ],
          purchaseContract: [
            {
              required: true,
              message: '请输入采购合同',
              trigger: 'blur'
            }
          ],
          utdPurchaseNum: [
            {
              required: true,
              message: '请输入已采购数量',
              trigger: 'blur'
            }
          ],
          purchaseStatus: [
            {
              required: true,
              message: '请输入采购状态',
              trigger: 'blur'
            }
          ],
        },
        //查询到的用户对象
        editForm:{
          ticketId: 1,
          planId: this.$root.planId,
          purchaseItem: '',
          expectSglPrice: '',
          purchaseNum: '',
          purchaseUnit: '',
          expectPrice: '',
          purchaseContract: '',
          utdPurchaseNum: '',
          purchaseStatus: '',
        },
      }
    },

    created () {
      this.getPlanList()
      console.log(this.$root.planId)
    },
    methods: {
      toAddAttachment () {
        this.$router.push({ path: '/attachment' })
      },
      //监听添加用户对话框的关闭事件
      addDialogClosed(){
        this.$refs.addFormRef.resetFields()
      },
      //监听修改用户对话框的关闭事件
      editDialogClosed(){
        this.$refs.editFormRef.resetFields()
      },
      addPlan(){
        this.$refs.addFormRef.validate(async valid => {
          if(!valid) return
          //校验通过发出添加请求
          await this.$http.post('add-plan', this.addForm);
          this.$message.success('添加采购计划成功！')
          this.addDialogVisible = false
          this.getPlanList()
        })
      },

      getPlanList () {
        this.$http.get('plan-list', { params: this.addForm }).then(res=> {
          this.Planlist=[]
          for (var i = 1; i < res.data.length; i++) {
            this.Planlist.push(res.data[i])
          }
          this.total = res.data[0].number
        })
      },
      //展示编辑用户的对话框
      async showEditDialog (ticketId){
        this.editForm.ticketId = ticketId;
        //console.log(this.ticketId)
        let res = await this.$http.get('search-plan-by-ticket-id',{ params:this.editForm})
        console.log(res);
        this.editForm = res.data;
        this.editDialogVisible = true
      },
      async editPlan(){
        let res = await this.$http.put('edit-plan', this.editForm);
        this.$message.success('修改采购计划成功！')
        this.editDialogVisible = false
        this.getPlanList()
      },
      //根据ticketId删除对应信息
      async removePlanById(ticketId){
        this.editForm.ticketId = ticketId;
        //弹框询问是否删除
        const confirmResult = await this.$confirm('此操作将永久删除该采购计划条目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        //若确认删除则返回字符串confirm,取消则为cancel
        //console.log(confirmResult)
        if(confirmResult !== 'confirm'){
          return this.$message.info('已经取消删除')
        }
        //console.log('确认了删除')
        await this.$http.delete('delete-plan-by-id', { params:this.editForm})
        this.$message.success('删除成功')
        this.getPlanList()
      }
    },
  }
</script>
